<template>
  <div>
    <div class="content_wrap" :style="{ width: editConfig.infomation.dynamicWidth + 'px' }">
      <img src="@/assets/images/residenManage/angle1.png" alt="">
      <img src="@/assets/images/residenManage/angle2.png" alt="">
      <img src="@/assets/images/residenManage/angle3.png" alt="">
      <img src="@/assets/images/residenManage/angle4.png" alt="">
      <div class="echarts_header" :style="{ height: editConfig.infomation.dynamicWidth != 414 ? 0 : 30 }">
        <h2>{{ editConfig.title }}</h2>
        <div v-if="editConfig.visible">
          <i class="el-icon-caret-bottom"></i>
          <span>时间跨度 : 近一年</span>
        </div>
      </div>
      <div v-if="editConfig.visible" ref="orderline" id="orderline" style="width:414px;height:256px"></div>
      <div v-else class="residentInfo">
        <p>上月常住人口</p>
        <p>{{ editConfig.infomation.statisticalData[0].lastMonthCount }}人</p>
        <p>本月常住人口</p>
        <p>{{ editConfig.infomation.statisticalData[0].monthCount }}人</p>
        <h3>常住人口环比增长{{ editConfig.infomation.statisticalData[0].percent}}%</h3>
        <p>上月住户</p>
        <p>{{ editConfig.infomation.statisticalData[1].lastMonthCount }}人</p>
        <p>本月住户</p>
        <p>{{ editConfig.infomation.statisticalData[1].lastMonthCount  }}人</p>
        <h3>住户环比增长{{ editConfig.infomation.statisticalData[1].percent}}%</h3>
      </div>
    </div>
  </div>
</template>  
  
<script>
// import echarts from 'echarts';
export default {
  name: 'EChartsLine',
  props: {
    eChartsForm: {
      type: Object,
      default: () => {
        return {
          title: "常住人口统计",
          visible: false,
          infomation: {
            templateId: '',
            // 统计数据
            statisticalData: [
              {
                personalStatus: "zh", //住户
                lastMonthCount: 82,
                monthCount: 100,
                percent: 82
              },
              {
                personalStatus: "msr", //常住人口
                lastMonthCount: 82, //上月数量
                monthCount: 100, //本月数量
                percent: 82 //百分比
              },
            ]
          },
        }
      }
    }
  },
  created() {
  },
  mounted() {
    // this.getOrderLine()
  },
  data() {
    return {
      editConfig: this.eChartsForm,
    }
  },
  methods: {
    getOrderLine() {
      let myChart = this.$echarts.init(document.getElementById('orderline'))
      myChart.setOption(
        {
          // title: {
          //   text: '常住人口统计'
          // },
          legend: {},
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            boundaryGap: false,
            nameTextStyle: {
              color: '#fff',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#66FFFF',
                type: "solid",//设置坐标轴为实线
              },
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#ccc',
                fontSize: '12',
              },
            },
          },
          yAxis: [
            {
              type: 'value',
              splitLine: {
                lineStyle: {
                  type: 'dashed',//设置刻度线条为虚线
                  width: 1,
                  color: 'rgba(255,255,255,0.1)'
                },
                show: true,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: 'rgba(255, 255, 255, 1)',
                  fontSize: '12',
                },
              },
            }
          ],
          series: [
            {
              name: '常住人口',
              // symbol: 'none',
              data: [
                202, 250, 270, 340, 380, 400, 388, 400, 450, 500, 400, 360,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '住户',
              // symbol: 'none',
              data: [
                88, 122, 188, 200, 250, 240, 240, 248, 287, 300, 250, 310,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '常住人口比率',
              // symbol: 'none',
              data: [
                20, 50, 80, 100, 150, 75, 30, 45, 30, 77, 88, 66,
              ],
              type: 'line',
              smooth: true,
            },
          ],
          // 下拉框配置项  
          select: {
            type: 'single', // 类型为单选下拉框  
            dataIndex: 'name', // 数据项的索引，用于关联数据项和下拉框选项  
            show: true, // 是否显示下拉框  
            inRange: { // 下拉框选中时的样式配置  
              color: '#ff0000' // 选中项的颜色为红色  
            },
            // 下拉框选项列表  
            optionList: [
              { name: '直接访问' },
              { name: '邮件营销' },
              { name: '联盟广告' },
              { name: '视频广告' },
              { name: '搜索引擎' }
            ]
          }
        },
        true
      )
    },
  }

};  
</script>
<style lang="scss" scoped>
.content_wrap {
  overflow: hidden;
  height: 280px;
  opacity: 1;
  background: #00000A;
  border: 1px solid #0E9CFF;
  box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
  position: relative;

  img:nth-of-type(1) {
    position: absolute;
    left: 1.01px;
    top: 0.93px;
  }

  img:nth-of-type(2) {
    position: absolute;
    right: 0px;
    top: 0.93px;
  }

  img:nth-of-type(3) {
    position: absolute;
    left: 1.01px;
    bottom: 1.5px;
  }

  img:nth-of-type(4) {
    position: absolute;
    right: 0px;
    bottom: 1.5px;
  }

  .echarts_header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

  }

  .residentInfo {

    p,
    h3 {
      margin: 7px 10px;
      font-family: 思源黑体;
      font-size: 14px;
      font-weight: bold;
      line-height: 16px;
      letter-spacing: 0px;

      /* 表单文字 */
      color: #A8D6FF;
    }

    h3 {
      color: red;
    }

    p:nth-of-type(1) {
      margin-top: 20px;

    }

    h3:nth-of-type(1) {
      margin-bottom: 25px;
    }
  }
}

::v-deep {
  .el-select {
    background-color: #274B65 !important;

    .el-input__inner {
      background-color: #274B65 !important;
    }
  }
}
</style>